<template>
	<view class="content">
		<view class="title">匹配兴趣</view>
		<view class="flex-tag">
			<u-tag :text="tag.name" :type="tag.checked ? 'error' : 'info'" :mode="tag.checked ? 'dark' : 'plain'" shape="circle" v-for="(tag, index) in tagList" :key="tag.id" @click="handleChange(tag.id)" />
		</view>
		<view class="bottom-group">
			<u-button shape="circle" :ripple="true" type="error" @click="handleFinish">完成</u-button>
			<view class="next-btn" @click="handleFinish">跳过</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tagList: [],
			}
		},
		methods:{
			handleFinish() {
				uni.navigateBack({
					delta: 2
				})
				uni.$emit('page-redirect'); // 通讯入口页面继续下次页面操作
			},
			handleChange(id) {
				const tag = this.tagList.find(item => item.id === id);
				console.log(11111, tag)
				if (tag !== undefined) {
				  tag.checked = !tag.checked;
				}
			},
			randomTags() {
				const len = 30;
				const str = '如果不需要宫格的边框可以设置该组件外层为组件包裹'
				const tags = [];
				for (let i = 0; i < len; i++) {
					const n = Math.ceil(Math.random() * 3 + 2);
					const item = [];
					for (let k = 0; k < n; k++) {
						const index = Math.floor(Math.random() * str.length);
						item.push(str[index]);
					}
					tags.push({
						name: item.join(''),
						id: i,
						checked: false
					});
				}
				console.log(tags)
				this.tagList = tags;
			}
		},
		onLoad() {
			this.randomTags()
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20rpx 45rpx;
		.title{
			font-size: 45rpx;
		}
	}
	.flex-tag{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row;
		width: 100%;
		margin-top: 60rpx;
		margin-right: -18rpx;
		/deep/ .u-tag{
			margin-right: 18rpx;
			margin-bottom: 26rpx;
		}
		/deep/ .u-mode-plain-info{
			color: #333;
			border-color: #B2B2B2;
		}
		/deep/ .u-mode-dark-error{
			border: 1px solid $font-color-red;
		}
	}
	
	.bottom-group{
		width: 100%;
		position: absolute;
		bottom: 30rpx;
		left: 0;
		padding: 0 60rpx;
		/deep/ .u-btn{
			background: linear-gradient(90deg, #FE614F 0%, #EB4D3C 100%);
			margin-bottom: 20rpx;
		}
	}
	
	.next-btn{
		color: #666;
		font-size: 26rpx;
		text-align: center;
		padding: 10rpx 0;
	}
</style>
